<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/swiper-bundle.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <!-- 页头 -->
    <div id="header">
        <div class="container">
            <div class="left"><a href="#">天猫首页</a>&emsp;喵，欢迎来到天猫</div>
            <div class="right"><a href="../pages/shoppingcart.html">购物车</a>&emsp;|&emsp;<a class="out" href="">退出登录</a></div>
        </div>
    </div>
    <!-- 搜索 -->
    <div id="search" class="container clearfix">
        <div class="logo"><img src="../images/logo.jpg" alt=""></div>
        <div class="search-box">
            <input type="text" placeholder="搜索 天猫 商品/品牌/店铺"><button>搜索</button>
        </div>
        <div class="download">
            下载天猫
            <img src="../images/erweima.jpg" alt="">
        </div>
    </div>
     
    <div id="page" class="container">
        <div id="navAndBanner">
            <div class="themeMarket clearfix">
                <h3>主题市场</h3>
                <p><span>女装</span>/<span>内衣</span></p>
                <p><span>男装</span>/<span>运动户外</span></p>
                <p><span>女鞋</span>/<span>男鞋</span>/<span>箱包</span></p>
                <p><span>美妆</span>/<span>个人护理</span></p>
                <p><span>腕表</span>/<span>眼镜</span>/<span>珠宝饰品</span></p>
                <p><span>手机</span>/<span>数码</span>/<span>电脑办公</span></p>
                <p><span>母婴玩具</span></p>
                <p><span>零食</span>/<span>茶酒</span>/<span>进口食品</span></p>
                <p><span>生鲜水果</span></p>
                <p><span>大家电</span>/<span>生活电器</span></p>
                <p><span>家具</span>/<span>灯具</span>/<span>卫浴</span></p>
                <p><span>汽车</span>/<span>配件</span>/<span>用品</span></p>
                <p><span>家纺</span>/<span>家饰</span>/<span>鲜花</span></p>
                <p><span>医药保健</span></p>
                <p><span>厨具</span>/<span>收纳</span>/<span>宠物</span></p>
                <p><span>图书音像</span></p>
            </div>

            <div class="right">
                    <ul class="nav">
                        <li><img src="../images/supermarket.jpg" alt=""></li>
                        <li><img src="../images/international.jpg" alt=""></li>
                        <li>天猫会员</li>
                        <li>喵鲜生</li>
                        <li>医药馆</li>
                        <li>魅力惠</li>
                        <li>飞猪旅行</li>
                        <li>苏宁易购</li>
                        <li>天猫内容</li>
                    </ul>

                    <div class="bottom clearfix">
                        <div class="swiper-all">
                            <!-- 轮播一 -->
                                <div class="swiper" id="first-rotation">
                                    <div class="swiper-wrapper">

                                    </div>
                                      <!-- 如果需要分页器 -->
                                      <div class="swiper-pagination"></div>
    
                                      <!-- 如果需要导航按钮 -->
                                      <div class="swiper-button-prev"></div>
                                      <div class="swiper-button-next"></div>
                                    
                                </div>                      

                            <!-- 轮播二 -->
                                <div class="swiper" id="second-rotation">
                                    <div class="swiper-wrapper">
                                      <div class="swiper-slide"></div>
                                      <div class="swiper-slide"></div>
                                      <div class="swiper-slide"></div>
                                    </div>

                                     <!-- 如果需要分页器 -->
                                     <div class="swiper-pagination"></div>
    
                                     <!-- 如果需要导航按钮 -->
                                     <div class="swiper-button-prev"></div>
                                     <div class="swiper-button-next"></div>
                                </div>
                            
                        </div>
                        <div class="notice">
                            <div class="head-portrait">
                                <img src="../images/touxiang.jpg" alt="">
                            </div>
                            <p class="name">hi!你好</p>
                            <img src="../images/gonggao.jpg" alt="">
                            <ul class="content">
                                <li><h4>公告</h4>新鲜事儿都在这里~</li>
                                <li><span>热点</span>设计创享家3D设计服务大赛来袭！</li>
                                <li><span>热点</span>全球新发现，好物开抢就现在！</li>
                                <li><span>热点</span>万款新品流行速递抢先看</li>
                            </ul>

                            <div>
                                <a class="myTracks"><img src="../images/img1.jpg">收藏的宝贝</a>
                                <a class="myTracks"><img src="../images/img2.jpg">买过的店铺</a>
                                <a class="myTracks"><img src="../images/img3.jpg">收藏的店铺</a>
                                <a class="myTracks"><img src="../images/img4.jpg">我的足迹</a>
                            </div>
                        </div>
                    </div>
            </div>
        </div>

       <div id="supermarket">天猫超市</div>
       <div id="product-list" class="container clearfix">

           <!-- 商品列表 -->
       </div>

       <div id="more"><a href="#">查看更多</a></div>
    </div>


    <!-- 版权 -->
    <div id="copyright">
        <div class="container">
        <p><a href="#">关于天猫</a><a href="#">商家服务大厅</a><a href="#">开放平台</a><a href="#">诚聘英才</a><a href="#">联系我们</a><a href="#">网站合作</a><a href="#">法律声明</a><a href="#">隐私权政策</a><a href="#">知识产权</a><a href="#">廉正举报</a><a href="#">不当竞争举报</a></p>
        <p><a href="#">阿里巴巴第团</a>|<a href="#">淘宝网</a>|<a href="#">天瞄</a>│<a href="#">聚划算</a>│<a href="#">全球速卖通</a>|<a href="#">阿里P丹国际交易市场</a>|<a href="#">168B</a>|<a href="#">阿里瞑妈</a>|<a href="#">飞猪</a>|<a href="#">阿里云计算</a>│<a href="#">AMioS</a>|<a href="#">阿里通信</a>|<a href="#">万网</a>|<a href="#">高德</a>|<a href="#">UC</a>|<a href="#">友塑</a>│<a href="#">虹米</a>│<a href="#">钉钉打</a>│<a href="#">支村宝</a>|<a href="#">阿里安全</a></p>

        </div>
    </div>

    <div id="goTop">回到<br>顶部</div>

    <script src="../js/swiper-bundle.js"></script>
    <script src="../js/ajaxutil.js"></script>
    <script src="../js/index.js"></script>
    
</body>
</html>